<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>书城首页</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/iconfont.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/index.css}"/>
    <script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
    <script language="JavaScript" th:src="@{/static/script/index.js}"></script>
</head>
<body>
<div id="app">
    <div class="topbar">
        <div class="w">
            <div class="topbar-left">
                <i>送至:</i>
                <i>北京</i>
                <i class="iconfont icon-ai-arrow-down"></i>
            </div>
            <div class="topbar-right" th:if="${session.currUser==null}">
                <a th:href="@{/page.do(operate='page',page='user/login')}" class="login">登录</a>
                <a th:href="@{/page.do(operate='page',page='user/regist')}"class="register">注册</a>
            </div>
            <div class="topbar-right" th:unless="${session.currUser==null}">
                <!--登录后风格-->
                <span>欢迎你<b th:text="${session.currUser.getUname()}">张总</b></span>
                <a th:href="@{/user.do(operate='cancel')}" class="register">注销</a>
                <a th:href="@{/page.do(operate='page',page='cart/cart')}" class="cart iconfont icon-gouwuche">
                    购物车
                </a>
                <a th:if="${session.currUser.getRole() == 1}" th:href="@{/page.do(operate='page',page='manager/manager')}" class="admin">后台管理</a>
            </div>
        </div>
    </div>
    <div class="header w">
        <a th:href="@{/book.do}" class="header-logo"></a>
        <div class="header-nav">
            <ul>
                <li><a href="#">标签</a></li>
                <li><a href="#">点击</a></li>
                <li><a href="#">可进入</a></li>
                <li><a href="#">对应</a></li>
                <li><a href="#">网页</a></li>
                <li><a href="#">目前</a></li>
                <li><a href="#">未完成</a></li>
            </ul>
        </div>
    </div>
    <div class="banner w clearfix" style="height: 360px">
        <div class="banner-left">
            <ul>
                <li  onmouseover="newBookApp()">
                    <a href="">
                        <span id="newMes">&nbsp;&nbsp;&nbsp;最新上架</span>
                        <i class="iconfont icon-jiantou"></i></a>
                </li>
                <li>&nbsp;</li>
                <li onmouseover="hotBookApp()">
                    <a href="">
                        <span id="hotMes">&nbsp;&nbsp;&nbsp;热销书籍</span>
                        <i class="iconfont icon-jiantou"></i></a>
                </li>
                <li>&nbsp;</li>
                <li onmouseover="goodBookApp()">
                    <a href="" colspan="3">
                        <span id="goodMes">&nbsp;&nbsp;&nbsp;推荐书籍</span>
                        <i class="iconfont icon-jiantou"></i></a>
                </li>
            </ul>
        </div>
        <div id="newBook" class="banner-right" style="display: block">
            <div href="" class="list-item" th:each="book : ${session.bookStatusList}" th:if="${book.bookStatus} == 1">
                <img th:src="@{|/static/uploads/${book.bookImg}|}" alt="">
                <p th:text="${book.bookName}">书名</p>
                <span class="cur-price"  th:text="|价格:￥${book.price}|">￥</span>
                <!--<button>查看详情</button>-->
            </div>
        </div>
        <div id="hotBook" class="banner-right" style="display: none">
            <div href="" class="list-item" th:each="book : ${session.bookStatusList}" th:if="${book.bookStatus} == 2">
                <img th:src="@{|/static/uploads/${book.bookImg}|}" alt="">
                <p th:text="${book.bookName}">书名</p>
                <span class="cur-price"  th:text="|价格:￥${book.price}|">￥</span>
                <!--<button>查看详情</button>-->
            </div>
        </div>
        <div id="goodBook" class="banner-right" style="display: none">
            <div href="" class="list-item" th:each="book : ${session.bookStatusList}" th:if="${book.bookStatus} == 3">
                <img th:src="@{|/static/uploads/${book.bookImg}|}" alt="">
                <p th:text="${book.bookName}">书名</p>
                <span class="cur-price"  th:text="|价格:￥${book.price}|">￥</span>
                <!--<button>查看详情</button>-->
            </div>
        </div>
    </div>
    <div class="books-list " id="index_div">
        <div class="w">
            <div class="list">
                <div class="list-header">
                    <div class="title">图书列表</div>
                    <div class="header-search" >
                        <input type="text" v-model="keyword"/>
                        <button class="iconfont icon-search" @click="searchKeyword"></button>
                    </div>
                    <div class="price-search">
                        <button @click="restartKeyword">刷新</button>
                    </div>
                </div>
                <div class="list-content">
                    <div href="" class="list-item" v-for="book in bookList">
                        <img :src="'/static/uploads/' + book.bookImg" alt="">
                        <p>书名:{{book.bookName}}</p>
                        <p>作者:{{book.author}}</p>
                        <p>价格:￥{{book.price}}</p>
                        <p>销量:{{book.saleCount}}</p>
                        <p>库存:{{book.bookCount}}</p>
                        <button @click="addCart(book.id)" v-show="book.bookCount != 0">加入购物车</button>
                    </div>
                </div>
                <div class="list-footer">
                    <div @click="firstPage">首页</div>
                    <div @click="page(-1)" v-show="pageNo != 1">上一页</div>
                    <ul>
                        <li>第</li>
                        <li class="active">{{pageNo}}</li>
                        <li>页</li>
                    </ul>
                    <div @click="page(+1)" v-show="pageNo != pageCount">下一页</div>
                    <div @click="lastPage">末页</div>
                    <span>共{{pageCount}}页</span>
                    <span>{{bookCount}}条记录</span>
                    <span>到第</span>
                    <input type="text" v-model="turnPageNo">
                    <span>页</span>
                    <button @click="turnPage">确定</button>
                </div>
            </div>
        </div>

    </div>
    <div class="bottom">
        <br/>
    </div>


</div>
</body>
</html>
